<template>
	<view class="order pb15  clearfix">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">我的订单</block>
		</cu-custom>
		<view class="wp100 discenter bg-white">
			<view class="flex align-center justify-between  wp100 ">
				<view class="f16 flex flex-direction align-center mt10 wp50 text-choce" v-if="TabCurs==1">
					<text>待备货</text>
					<view class="block68-9 mt10"></view>
				</view>
				<view class="f16 flex flex-direction align-center mt10 wp50" v-else @click="choicebeihuo">
					<text>待备货</text>
					<view class="nochoice mt10" ></view>
				</view>
				<view class="f16 flex flex-direction align-center mt10 wp50 text-choce" v-if="TabCurs==2">
					<text>退款/已完成</text>
					<view class="block68-9 mt10"></view>
				</view>
				<view class="f16 flex flex-direction align-center mt10 wp50" v-else @click="choicewancheng">
					<text>退款/已完成</text>
					<view class="nochoice mt10"></view>
				</view>
			</view>
		</view>
		<!-- order -->
		<view class="mt5 bg-white px15 flex flex-direction"  v-for="(item,index) in goodlist" :key="index" :class="{mt10:index!=0}">
			<view class="py15 mt5 flex align-center justify-between" @click="pushPage('/pages/mystore/storeddxq?id='+item.id)">
				<view class="fle align-center">
					<text>订单号：</text>
					<text class="ml5">{{item.orderSn}}</text>
				</view>
				<text>{{item.statusName}}</text>
			</view>
			<view class="flex flex-direction wp100" v-for="(goods,index) in item.data" :key="index" @click="pushPage('/pages/mystore/storeddxq?id='+item.id)">
				<view class="flex align-center  py10 bt1">
					<view class="block70 border-info radius-5 discenter"><image :src="goods.pic" class="block70"></image></view>
					<view class="flex flex-direction align-start justify-between ml15 h70 mworde">
						<view class="flex flex-direction pr10 wp100">
							<text class="ellipsis">{{goods.name}}</text>
							<text class="ellipsis wp100 mt5 f12 text-info">{{goods.cname}}</text>
						</view>
						<view class="flex align-center  justify-between wp100">
							<text class="text-prices">￥{{goods.money}}</text>
							<text class="text-info">X{{goods.num}}</text>
						</view>
					</view>
				</view>
				<view class="flex align-center justify-end py10 bt1" :class="{mb10:item.status==2}">
					<text class="text-black mr10">共{{item.num}}件</text>
					<text class="text-prices">￥{{item.countMoney}}</text>
				</view>
			</view>
			<view class="mt8 pb10 mb10" >
				<view class=" flex align-center justify-end" v-if="TabCurs==1">
				    <view class="order-quxiao discenter mr15" @click="quxiao(item)">取消</view>
				    <view class="order-del discenter" @click="pushPage('/pages/mystore/storeddxq?id='+item.id)">去确认</view>
				</view>
				<view class="px15 flex align-center justify-end " v-else>
					<view class="order-del discenter mr15" v-if="item.status==3" @click="bohui(item)">驳回退款</view>
					<view class="order-del discenter" v-if="item.status==3" @click="queren(item)">确认退款</view>
				    <view class="order-del discenter" v-if="item.status!=3" @click="delorder(item)">删除</view>
				</view>   
			</view>
		</view>
		<view @touchmove.stop.prevent class="cu-modal" :class="modalName == 'onlineModal' ? 'show' : ''">
			<view class="cu-dialog bg-white" @tap.stop>
				<view class="py20 discenter f16 fwb">取消订单</view>
				<view class="mb40">您确定要取消该订单吗？</view>
				<view class="action h50 mx0 flex-sub f12  bt1  flex align-center justify-between px30 ">
					<view class="w-50 discenter br1">
						<text @click="HideModal" class="px20 py10 radius-5 f15 color-black">取消</text>
					</view>
					<view class="w-50 discenter">
						<text @click="quxiaosure" class="px20 py10 radius-5 f15 color-black">确定</text>
					</view>
				</view>
			</view>
		</view>
		</form>
	</view>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
	components: {},
	data() {
		return {
			list: ['待备货', '退款/已完成'],
			ordernum: '',
			ordername:['','待付款', '配送中', '待收货', '已完成','已取消'],
			TabCurs: 1,
			finish: false,
			goodlist: [],
			blocks:false
		}
	},
	computed: {
		...mapState(['update',  'isLoading', 'ordertabs'])
	},
	onHide() {
		this.HideModal()
	},
	onBackPress() {
		this.HideModal()
	},
	onLoad(e) {
		this.TabCurs=e.type
		this.getDatas()
	},
	onShow() {
		if(this.update){
			this.getDatas()
			this.setUpdate(false)
		}
	},
	
	methods: {
		...mapActions(['setUpdate']),
		async getDatas() {
			let {data} = await this.$http.post('user.mydd', { type: this.TabCurs}, { tipConfig: { storeLoading: true } })
			this.goodlist=data
		},
		//确认收货
		async shouhuo(item) {
			let { data } = await this.$http.post('store.mysure', {orderId:item.id}, {
				tipConfig: { storeLoading: true, isSuccessTip: true  }
			})
			this.cleartabs()
			this.getDatas()
			this.setUpdate(true)
		},
		async  bohui(item){
			let { data } = await this.$http.post('order.bohui', {orderId:item.id}, {
				tipConfig: { storeLoading: true, isSuccessTip: true  }
			})
			this.cleartabs()
			this.getDatas()
			this.setUpdate(true)
		},
		async queren(item){
			let { data } = await this.$http.post('order.tongguo', {orderId:item.id}, {
				tipConfig: { storeLoading: true, isSuccessTip: true  }
			})
			this.cleartabs()
			this.getDatas()
			this.setUpdate(true)
		},
		//删除
		async delorder(item){
			let { data } = await this.$http.post('store.mydel', {orderId:item.id}, {
				tipConfig: { storeLoading: true, isSuccessTip: true  }
			})
			this.cleartabs()
			this.getDatas()
			this.setUpdate(true)
		},
		//取消
		quxiao(item){
			this.ordernum = item.id
			this.ShowModal('onlineModal')
		},
		async quxiaosure() {
			await this.$http.post('store.myquxiao', { orderId: this.ordernum }, { tipConfig: { isSuccessTip: true } })
			this.HideModal()
			this.cleartabs()
			this.getDatas()
			this.setUpdate(true)
		}, 
		choicebeihuo() {
			if(this.TabCurs==1){
				return false
			}else{
				this.TabCurs=1
				this.cleartabs()
				this.getDatas()
			}
		},
		choicewancheng() {
			if(this.TabCurs==2){
				return false
			}else{
				this.TabCurs=2
				this.cleartabs()
				this.getDatas()
			}
		},
		cleartabs(){
			this.goodlist=[]
		}
	}
}
</script>

<style lang="less">
.order-del{
	border: 0.5px solid #FE4725;
	border-radius:5rpx;
	width: 160rpx;
	height: 60rpx;
	color: #FE4725;
}
.order-quxiao{
	border: 0.5px solid #CCCCCC;
	border-radius: 5rpx;
	color: #000000;
	width: 160rpx;
	height: 60rpx;	
}
.mworde{
	width: calc(100% - 170rpx);
}
.w282{
	width: 220rpx;
	margin-right: 66rpx !important;
}
.block75{
	width: 150rpx;
	height: 150rpx;
}
.shop-live{
	width: 24rpx;
	height: 28rpx;
}
.h75{
	height: 150rpx;
}
.blcok-live{
	width: 130rpx;
	height: 50rpx;
	background-image: linear-gradient(to top, #FE4725, #FF8463) !important;
	border-radius: 10rpx;
}
.block-box{
	width: calc(100% - 170rpx);
}
.class-address{
	width: 26rpx;
	height: 27rpx;
}
.block68-9{
	width: 118rpx;
	height: 7rpx;
	background-color: #FF261B;
}
.text-choce{
	color: #FF261B;
}
.nochoice{
	width: 118rpx;
	height: 7rpx;
	background-color: #FFFFFF;		
}
.wp50{
	width: 50%;
}
</style>
